<template>
	<!-- 权限管理 -->
	<div style="height:3000px">
		<v-card>
			<v-card-title>
				<!-- 	<v-btn class="ml-2" small tile color="primary" @click="editActionDialog=true,ActionModel={}">
					新增
				</v-btn> -->
			<!-- 	<v-btn class="ml-2" small tile color="primary" @click="UpLoadMenus">
					上传前端所有菜单
				</v-btn> -->
				<v-divider class="mx-4" inset vertical></v-divider>

				<v-row class="mt-2">
					<v-col cols="12" sm="3" md="2">
						<v-text-field label="权限名称" v-model="actionQuery.name" dense outlined>
						</v-text-field>
					</v-col>
					<v-col cols="12" sm="3" md="2">
						<v-select label="权限类型" v-model="actionQuery.apitype" :items="apiTypeItems" dense outlined>
						</v-select>
					</v-col>
					<v-col cols="12" sm="3" md="2">
						<v-select label="权限所属平台" v-model="actionQuery.requestEquipment" :items="RequestEquipmentItems"
							dense outlined>
						</v-select>
					</v-col>

					<v-col>
						<v-btn color="primary" @click="search">查询</v-btn>
						<v-btn class="ml-3" depressed color="primary" @click="refreshApps">
							刷新</v-btn>
					</v-col>
				</v-row>
			</v-card-title>
			<v-data-table :headers="actionHeaderList" :items="actionDataList" small fixed-header item-key="id" dense
				class="text-no-wrap" loading-text="正在加载请稍等......" :loading="actionLoading" :options.sync="actionOptions"
				:footer-props="vuetifyDefaultPage" :server-items-length="actionTotalCount">
				<template v-slot:item.actions="{ item }">
					<div>
						<v-btn class="ml-2" small tile color="primary" @click="editActionDialog=true,ActionModel=item">
							编辑
						</v-btn>
					</div>
				</template>
				<template v-slot:item.showweb="{ item }">
						{{item.showweb?'是':'否'}}
				</template>
				
			</v-data-table>
		</v-card>


		<v-dialog v-model="editActionDialog" width="700">
			<v-card>
				<v-card-title>编辑权限</v-card-title>
				<v-card-text>
					<v-row>
						<v-col cols="6">
							<v-select label="站点" v-model="ActionModel.site" :items="RequestEquipmentItems" dense>
							</v-select>
						</v-col>
						<v-col cols="6">
							<v-select label="权限类型" v-model="ActionModel.apitype" :disabled="ActionModel.id!==undefined"
								:items="apiTypeItems" dense>
							</v-select>
						</v-col>
						<v-col cols="6">
							<v-text-field label="权限名称" v-model="ActionModel.name" dense>
							</v-text-field>
						</v-col>
						<v-col cols="6">
							<v-text-field label="组内排序" :rules="qtyRule" v-model="ActionModel.order" dense>
							</v-text-field>
						</v-col>
						<v-col cols="6">
							<v-text-field label="前端路由" v-model="ActionModel.path" :disabled="ActionModel.id!==undefined"
								dense>
							</v-text-field>
						</v-col>
						<v-col cols="6">
							<v-text-field label="图标" v-model="ActionModel.icon" :disabled="ActionModel.id!==undefined"
								dense>
							</v-text-field>
						</v-col>
						<v-col cols="6">
							<v-text-field label="控制器代码" v-model="ActionModel.controllername"
								:disabled="ActionModel.id!==undefined" dense>
							</v-text-field>
						</v-col>
						<v-col cols="6">
							<v-text-field label="菜单名称" v-model="ActionModel.controllerdescription"
								:disabled="ActionModel.id!==undefined" dense>
							</v-text-field>
						</v-col>
						<v-col cols="6">
							<v-text-field label="方法代码" v-model="ActionModel.actionname"
								:disabled="ActionModel.id!==undefined" dense>
							</v-text-field>
						</v-col>
						<v-col cols="6">
							<v-text-field label="方法描述" v-model="ActionModel.actiondescription" dense>
							</v-text-field>
						</v-col>
	<v-col cols="6">
							<v-checkbox label="前端是否可见(针对权限类型为:菜单)" v-model="ActionModel.showweb" dense>
							</v-checkbox>
						</v-col>
					</v-row>
				</v-card-text>
				<v-card-actions>
					<v-spacer></v-spacer>
					<v-btn color="success" class="mr-4" text @click="editActionSubmit">确认</v-btn>
					<v-btn color="warning" class="mr-4" text @click="close">取消</v-btn>

				</v-card-actions>
			</v-card>
		</v-dialog>

	</div>
</template>

<script>
	import {
		mapActions,
		mapState
	} from 'vuex'

	import {
		menuAside
	} from "@/menu/index.js";
	export default {
		data: () => ({
			qtyRule: [
				v => /^[0-9]*$/.test(v) || '请输入合法数字',
				v => v >= 0 || '需求量不能小于0'
			],
			apiTypeItems: [{
				text: '菜单',
				value: 1
			}, {
				text: '按钮',
				value: 2
			}, {
				text: '接口',
				value: 3
			}, {
				text: '其它',
				value: 99
			}],
			RequestEquipmentItems: [],
			actionQuery: {
				name: '',
				apitype: 1,
				requestEquipment: 1,
			},
			actionDataList: [],
			actionTotalCount: 0,
			actionLoading: true,
			actionOptions: { //页数
				page: 1,
				//每页行数
				itemsPerPage: 10
			},
			vuetifyDefaultPage: {
				'items-per-page-text': '每页个数',
				'items-per-page-options': [10, 20, 50, 100]
				// 'items-per-page-all-text': '100'
			},
			ActionModel: {},
			editActionDialog: false,
			menus: menuAside,
		}),
		watch: {
			actionOptions: {
				handler() {
					this.search()
				},
				deep: true
			},
		},
		created() {
			this.getActionHeaderList()
			this.loadRequestEquipment()
		},
		methods: {
			...mapActions('mes/common', [
				//获取物料信息
				'LoadTextSameValueTypes'
			]),
			async loadRequestEquipment() {
				this.RequestEquipmentItems = await this.LoadTextSameValueTypes({
					pramterEnums: ['RequestEquipment']
				})
			},
			async search() {
				this.actionLoading = true
				var response = await this.$httpRequest({
					url: `SPM/SPMAction/LoadPage?
					name=${this.actionQuery.name}&
					apitype=${this.actionQuery.apitype}&
					requestEquipment=${this.actionQuery.requestEquipment}&
						pageNumber=${this.actionOptions.page}&
						pageSize=${this.actionOptions.itemsPerPage}`,
					method: 'get',
				})
				if (response.status == 1) {
					this.actionDataList = response.data.result
					this.actionTotalCount = response.data.pagination.totalRecords
					this.actionLoading = false
				} else {
					this.$message.error(response.info)
				}
			},
			async refreshApps() {
				this.actionQuery.name = ''
				this.actionQuery.apitype = null
				this.actionQuery.requestEquipment = null
				await this.search()
			},
			async editActionSubmit() {
				var url = ''

				if (this.ActionModel.id > 0) {
					url = 'SPM/SPMAction/Update'
				} else {
					url = 'SPM/SPMAction/Add'
				}
				var response = await this.$httpRequest({
					url: url,
					method: 'post',
					data: this.ActionModel
				})
				if (response.status == 1) {
					this.$message.success(response.info)
					await this.search()
					this.close()
				} else {
					this.$message.error(response.info)
				}
			},
			async UpLoadMenus() {
				var response = await this.$httpRequest({
					url: `SPM/SPMAction/UpLoadMenus`,
					method: 'post',
					data: this.menus
				})
				if (response.status == 1) {
					this.$message.success(response.info)
				} else {
					this.$message.error(response.info)
				}
			},
			close() {
				this.ActionModel = {}
				this.editActionDialog = false
			},
			getActionHeaderList() {
				this.actionHeaderList = [{
						text: '操作',
						align: 'center',
						value: 'actions',
						filterable: false,
						class: 'fixed'
					},
					{
						text: '前端是否可见(针对权限类型为:菜单)',
						align: 'left',
						value: 'showweb',
						filterable: false,
						class: 'fixed'
					},
					{
						text: '权限类型',
						align: 'left',
						value: 'apitypename',
						filterable: false,
						class: 'fixed'
					},
					{
						text: '权限名称',
						align: 'left',
						value: 'name',
						filterable: false,
						class: 'fixed'
					},
					{
						text: '可用站点',
						align: 'left',
						value: 'site',
						filterable: false,
						class: 'fixed'
					},
					{
						text: '控制器代码',
						align: 'left',
						value: 'controllername',
						filterable: false,
						class: 'fixed'
					},
					{
						text: '方法代码',
						align: 'center',
						value: 'actionname',
						filterable: false,
						class: 'fixed'
					},
					{
						text: '控制器描述',
						align: 'center',
						value: 'controllerdescription',
						filterable: false,
						class: 'fixed'
					},
					{
						text: '方法描述',
						align: 'center',
						value: 'actiondescription',
						filterable: false,
						class: 'fixed'
					},
					{
						text: '组内排序',
						align: 'center',
						value: 'order',
						filterable: true,
						class: 'fixed'
					},
					{
						text: '前端路由',
						align: 'center',
						value: 'path',
						filterable: false,
						class: 'fixed'
					},
					{
						text: '前端图标',
						align: 'center',
						value: 'icon',
						filterable: false,
						class: 'fixed'
					},
					{
						text: '父级id',
						align: 'center',
						value: 'parentactionid',
						filterable: true,
						class: 'fixed'
					},
					{
						text: '父级路径',
						align: 'center',
						value: 'parentstr',
						filterable: true,
						class: 'fixed'
					},
					{
						text: '权限Id',
						align: 'center',
						value: 'id',
						filterable: true,
						class: 'fixed'
					}
				]
			},

		},
	}
</script>

<style>
</style>
